<template>
  <el-dialog
    title="选择角色"
    width="600px"
    top="10vh"
    :close-on-click-modal="false"
    destroy-on-close
    :visible="dialogVisible"
    class="add-person-dialog"
    append-to-body
    @close="close"
  >
    <el-row>
      <el-col :span="12">
        <el-card
          v-loading="wrapperLoading"
          shadow="never"
          class="mr10 dialog-page-full left-wrapper"
        >
          <div class="left-top">
            <el-input v-model="roleName" placeholder="请输入" clearable @change="doSearch">
              <el-button slot="append" icon="el-icon-search" @click="doSearch" />
            </el-input>
          </div>

          <div class="left-bottom" flex>
            <el-scrollbar>
              <div class="left-right ptb10">
                <div v-if="!roleList.length" class="empty-wrapper fcc">暂无数据</div>
                <div
                  v-for="(item, index) in roleList"
                  v-else
                  :key="index"
                  class="checkbox-wrapper pl10"
                >
                  <el-checkbox v-model="checkedRoleIds" :label="item.roleId" @change="leftChange">{{
                    item.roleName
                  }}</el-checkbox>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="never" class="ml10 dialog-page-full">
          <div>
            <div v-if="!checkedRoleList.length" class="empty-wrapper fcc">暂无数据</div>
            <div class="right-wrapper">
              <div v-for="(item, index) in checkedRoleList" :key="index" class="right-item fbc">
                <span>{{ item.roleName }}</span>
                <el-button type="text" class="danger" @click="doDel({ item, index })"
                  >删除</el-button
                >
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <span slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submitData">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import dialogMixin from "mixins/dialogMixin";
import organizeSimpleTreeMixins from "mixins/organizeSimpleTreeMixins";
import { UserSimpleList } from "api/sys/user";
import { RoleListSimple } from "api/sys/role";
import { cloneDeep } from "lodash";

export default {
  mixins: [dialogMixin, organizeSimpleTreeMixins],
  props: {
    // 当前行数据
    currentRowObj: {
      type: Object,
      default: () => ({}),
    },
    // 选中的数据
    currentCheckedRoleList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 角色名称
      roleName: "",
      checkList: [],
      // 角色列表
      roleList: [],
      // 已选择角色列表
      checkedRoleList: [],
      checkedRoleIds: [],
    };
  },
  methods: {
    /**
     * 初始化弹窗
     */
    initForm() {
      this.initData();
      this._RoleListSimple();
    },
    /**
     * 搜索
     */
    doSearch() {
      this._RoleListSimple({ data: { roleName: this.roleName } });
    },
    /**
     * 重置密码的操作
     */
    submitData() {
      this.$emit("success", { val: this.checkedRoleList });
      this.close();
    },
    initData() {
      const tempArr = cloneDeep(this.currentCheckedRoleList);
      this.checkedRoleList = tempArr;
      this.checkedRoleIds = tempArr.map((item) => item.roleId);
    },
    /**
     * 树节点的选择事件
     */
    async handleCheckChange() {
      try {
        const checkedKeys = this.$refs.tree.getCheckedKeys(false, false);
        if (checkedKeys.length) {
          const organizeIds = checkedKeys.join();
          const data = await UserSimpleList(organizeIds);
          this.personArr = data;
        }
      } catch (e) {
        console.log(e);
      }
    },
    /**
     * 获取角色已关联人员列表
     */
    async _RoleListSimple({ data } = {}) {
      try {
        this.wrapperLoading = true;
        const roleList = await RoleListSimple({ ...data });
        this.roleList = roleList;
      } catch (e) {
        console.log(e);
      } finally {
        this.wrapperLoading = false;
      }
    },

    async leftChange() {
      const arr = this.roleList.filter((item) => this.checkedRoleIds.includes(item.roleId));
      this.checkedRoleList = arr;
    },
    /**
     * 删除选择的角色
     */
    async doDel({ item, index }) {
      await this.$myConfirm("移除本角色");
      this.checkedRoleList.splice(index, 1);
      this.checkedRoleIds = this.checkedRoleIds.filter((item1) => item1 !== item.roleId);
    },
  },
};
</script>

<style lang="scss">
.add-person-dialog {
  .dialog-page-full {
    height: calc(100vh - 260px);
    position: relative;
    .empty-wrapper {
      height: 100%;
      color: #606266;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }
  }
  .el-card__body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 !important;
    .left-top {
      border-bottom: 1px solid #ebeef5;
      padding: 10px;
    }
    .left-bottom {
      flex: 1;
      height: calc(100% - 53px);
      .left-left {
        padding: 10px;
        height: 100%;
        flex: 1;
        border-right: 1px solid #ebeef5;
      }
      .el-scrollbar {
        flex: 1;
      }
    }
  }

  .right-wrapper {
    padding: 0 20px;
    height: calc(100vh - 260px);
    .right-item {
      border-bottom: 1px solid #ebeef5;
      &:last-child {
        border-bottom: none;
        padding-bottom: 5px;
      }
      &:first-child {
        padding-top: 5px;
      }
    }
  }

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-checkbox__label {
    line-height: 18px !important;
  }
  .el-tree-node__label {
    line-height: 18px;
  }
}
</style>
